<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">
<ui:composition template="template.xhtml">
<ui:define name="content">
	<h:form id="form">
		<p:dataTable id="dataTable" var="car" value="#{tableBean.carsSmall}"
			widgetVar="carsTable"
			emptyMessage="No cars found with given criteria"
			filteredValue="#{tableBean.filteredCars}">

			<f:facet name="header">
				<p:outputPanel>
					<h:outputText value="Search all fields:" />
					<p:inputText id="globalFilter" onkeyup="PF('carsTable').filter()"
						style="width:150px" placeholder="Enter keyword" />
				</p:outputPanel>
			</f:facet>

			<p:column id="modelColumn" filterBy="model" headerText="Model"
				footerText="contains" filterMatchMode="contains">
				<h:outputText value="#{car.model}" />
			</p:column>

			<p:column id="yearColumn" filterBy="year" headerText="Year"
				footerText="lte" filterMatchMode="lte">
				<f:facet name="filter">
					<p:spinner onchange="PF('carsTable').filter()" min="1960"
						max="2010" styleClass="year-spinner">
						<f:converter converterId="javax.faces.Integer" />
					</p:spinner>
				</f:facet>
				<h:outputText value="#{car.year}" />
			</p:column>

			<!--
			<p:column id="manufacturerColumn" filterBy="manufacturer"
				headerText="Manufacturer" footerText="exact" filterMatchMode="exact">
				<f:facet name="filter">
					<p:selectOneMenu onchange="PF('carsTable').filter()">
						<f:selectItems value="#{tableBean.manufacturerOptions}" />
					</p:selectOneMenu>
				</f:facet>
				<h:outputText value="#{car.manufacturer}" />
			</p:column>
		 	-->

			<p:column id="colorColumn" filterBy="color" headerText="Color"
				footerText="in" filterMatchMode="in">
				<f:facet name="filter">
					<p:selectCheckboxMenu label="Colors"
						onchange="PF('carsTable').filter()" panelStyle="width:125px"
						scrollHeight="150">
						<f:selectItems value="#{tableBean.colors}" />
					</p:selectCheckboxMenu>
				</f:facet>
				<h:outputText value="#{car.color}" />
			</p:column>

			<p:column id="soldColumn" filterBy="sold" headerText="Status"
				footerText="equals" filterMatchMode="equals">
				<f:facet name="filter">
					<p:selectOneButton onchange="PF('carsTable').filter()">
						<f:converter converterId="javax.faces.Boolean" />
						<f:selectItem itemLabel="All" itemValue="" />
						<f:selectItem itemLabel="Sold" itemValue="true" />
						<f:selectItem itemLabel="Sale" itemValue="false" />
					</p:selectOneButton>
				</f:facet>
				<h:outputText value="#{car.sold ? 'Sold': 'Sale'}" />
			</p:column>

			<p:column id="priceColumn" filterBy="price" headerText="Price"
				footerText="custom (min)"
				filterFunction="#{tableBean.filterByPrice}">
				<h:outputText value="#{car.price}">
					<f:convertNumber currencySymbol="$" type="currency" />
				</h:outputText>
			</p:column>
		</p:dataTable>
	</h:form>
	</ui:define>
</ui:composition>
</html>